// Match DateTimePicker styling

.daterangepicker.show-calendar {
    --daterangepicker-border: #{$dropdown-border-width} solid #{$dropdown-border-color};
    --daterangepicker-border-radius: #{$dropdown-border-radius};
    --daterangepicker-bg: #{$dropdown-bg};
    --daterangepicker-color: #{map-get($grays, '900')};

    @if $enable-shadows {
        --daterangepicker-box-shadow: #{$dropdown-box-shadow};
    }

    --daterangepicker__table-bg: #{$table-bg};
    --daterangepicker__thead-bg: #{map-get($grays, '100')};

    --daterangepicker__cell-border-color: #{$table-border-color};
    --daterangepicker__cell-bg--hover: #{map-get($grays, '100')};

    --daterangepicker__select-bg: #{$form-select-bg};
    --daterangepicker__select-border-color: #{$input-border-color};
    --daterangepicker__select-color: #{$form-select-color};


    border: var(--daterangepicker-border);
    border-radius: var(--daterangepicker-border-radius);
    background-color: var(--daterangepicker-bg);
    box-shadow: var(--daterangepicker-box-shadow);
    font-family: inherit;

    &:before {
        border-bottom-color: var(--daterangerpicker__arrow-border-color, #{$dropdown-border-color});
    }
    
    &:after {
        border-bottom-color: var(--daterangerpicker__arrow-background-color, #{$dropdown-bg});
    }

    .calendar-table {
        border: 0;
        background-color: var(--daterangepicker__table-bg);

        .next span, .prev span {
            border-color: var(--daterangepicker-color);
        }

        td, th {
            border-bottom-color: var(--daterangepicker__cell-border-color);

            &, &.start-date.end-date {
                border-radius: 0;
            }

            &:not(.active) {
                color: var(--daterangepicker-color);

            }
            &.available:hover {
                background-color: var(--daterangepicker__cell-bg--hover);
            }


            &.prev, &.next, &.off.ends {
                @include o-hover-opacity(.5);
            }
        }

        td {
            font-size: ($font-size-base + $font-size-sm) * .5;

            &.today {
                position: relative;

                &:before {
                    content: '';
                    display: inline-block;
                    position: absolute;
                    bottom: 4px;
                    right: 4px;
                    border: solid transparent;
                    border-width: 0 0 7px 7px;
                    border-bottom-color: $o-brand-primary;
                    border-top-color: $dropdown-border-color;
                }
            }

            &.in-range {
                background-color: rgba($o-brand-odoo, 0.3);
                color: $o-main-text-color;
                text-shadow: none;
            }

            &.active,
            &.active:hover,
            &.in-range:hover {
                background-color: $o-brand-odoo;
                color: $white;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
            }

            &.off {
                background-color: var(--daterangepicker__cell-bg--off, #{rgba($secondary, .1)});
            }

        }

        thead tr {
            &:nth-child(1) th {
                height: 30px;
                line-height: 30px;

                &.month {
                    font-size: $font-size-lg;
                }
            }
            &:nth-child(2) th {
                background-color: var(--daterangepicker__thead-bg);
                font-size: $font-size-sm;
                font-weight: $font-weight-bold;
                color: $o-main-text-color;
            }
        }
    }

    .calendar-time {
        /*rtl:ignore*/
        direction:ltr;
        select {
            &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
                display: initial;
                border-color: var(--daterangepicker__select-border-color);
                background-color: var(--daterangepicker__select-bg);
                color: var(--daterangepicker__select-color);
                -webkit-appearance: menulist-button;
                -moz-appearance: menulist-button;
                appearance: menulist-button;
            }
        }
    }

    .drp-buttons {
        border-top: 0;

        .btn {
            text-transform: uppercase;
            font-weight: $btn-font-weight;
        }

        .drp-selected {
            display: none;
        }
    }

    @include media-breakpoint-down(sm) {
        position: fixed;
        top: auto !important;
        left: 0 !important;
        bottom: 0;
        right: 0 !important;
        width: auto;
        max-height: 90vh;
        overflow-y: auto;
        @include border-top-radius(1rem);
        box-shadow: $box-shadow-lg;

        .drp-calendar {
            max-width: inherit;
            padding-right: 0 !important;
            padding-left: 0 !important;
        }

        .drp-buttons {
            position: sticky;
            bottom: 0;
            background-color: #fff;
        }
    }
}
